<template>
  <div class="year-factor-inline">
    <a-row :gutter="[48, 8]" wrap>
      <a-col :span="12" class="field-text">Year</a-col>
      <a-col :span="12" class="field-text">Year Factor</a-col>
      <a-col :span="12">
        <a-row>
          <a-col :span="10">
            <a-input-number style="width: 100%" :precision="0" :controls="false" disabled :value="from" />
          </a-col>
          <a-col :span="4" style="text-align: center">
            <span class="field-text" style="line-height: 30px">To</span>
          </a-col>
          <a-col :span="10">
            <a-input-number
              v-model:value="toValue"
              style="width: 100%"
              :max="50"
              :min="from"
              :precision="0"
              :controls="false"
              :disabled="isLast"
            />
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-input-number v-model:value="factorValue" :min="0" style="width: 100%" :precision="0" :controls="false">
          <template #addonAfter> <span style="color: rgba(0, 0, 0, 0.45)">%</span> </template>
        </a-input-number>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  from: {
    type: [Number, null]
  },
  to: {
    type: [Number, null]
  },
  factor: {
    type: [Number, null]
  },
  isLast: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:to', 'update:factor'])
const toValue = computed({
  get: () => props.to,
  set: value => emits('update:to', value)
})
const factorValue = computed({
  get: () => (props.factor !== null ? (props.factor * 100).toFixed(0) : null),
  set: value => emits('update:factor', value !== null ? value / 100 : null)
})
</script>

<style lang="less" scoped></style>
